<template>
	<view>
		<view>
			<view class="s_card">
				<view class="input_box_hotw">
					<text class="input_label">设备编码</text>
					<input style="width: calc(100% - 64upx - 64upx);" type="number" v-model="code" placeholder="输入水控机编码或扫码二维码"
					 maxlength="11" />
					<view class="scan_input">
						<image @click="scan" src="../static/scan1.png" style="width: 60upx;height: 60upx;position: relative;top: 8upx;left: 12upx;"
						 mode=""></image>
					</view>
				</view>
			</view>
			<view class="s_card">
				<view class="input_box_hotw" @click="showChangSchool">
					<text class="input_label">选择学校</text>
					<input style="width: calc(100% - 64upx);" disabled="true" type="text" :value="school.orgName" placeholder="请输入您所在的学校" />
				</view>
			</view>
			<view class="s_card">
				<view class="input_box_hotw">
					<text class="input_label" style="padding: 30upx 0;">故障描述</text>
				</view>
				<view class="image_box">
					<textarea placeholder="请详细描述故障内容" maxlength="120"/>
				</view>
			</view>
			<view class="s_card">
				<view class="input_box_hotw">
					<text class="input_label" style="padding: 30upx 0;">上传图片</text>
				</view>
				<view class="image_box">
					<block v-for="(image,index) in imageList" :key="index">
						<view class="uploader_file" style="position: relative;">
							<image class="uploader_img" :src="image" @tap="previewImage(index)"></image>
							<view class="close-view" @click="close(index)">
								<uni-icons color="#FFF" size="12" type="closeempty"></uni-icons>
							</view>
						</view>
					</block>
					<view class="uploader_input_box" v-if="imageList.length < 6">
						<view class="uploader_input" @tap="chooseImg"></view>
					</view>
				</view>
			</view>
			<view class="s_card">
				<view class="input_box_hotw">
					<text class="input_label">联系方式</text>
					<input style="width: calc(100% - 64upx);" password type="password" placeholder="输入联系方式,以便联系您" v-model="cardPwd"
					 maxlength="6" confirm-type="完成" />
				</view>
			</view>
		</view>
		<view class="submit">
			<button class="submitBtn radius_btn" :disabled="!agreement" @click="bindCard">提交上报</button>
		</view>
		<!-- 底部选择学校弹窗 -->
		<uni-popup ref="showSchool" type="bottom">
			<view class="uni-share">
				<text class="uni-share-title">选择学校</text>
				<view class="">
					<view class="input_box_hotw">
						<uni-icons type="search" size="30" color="#999"></uni-icons>
						<input type="text" style="width: calc(100% - 120upx);" @input="searchSchoolList(1000)" v-model="search"
						 placeholder="请输入学校名称进行搜索" />
					</view>
					<scroll-view scroll-y="true" class="schoolList" refresher-threshold="45" refresher-enabled="true">
						<radio-group @change="schoolChange">
							<label v-for="(item,index) in schoolList" :key="index" class="item">
								<text>{{item.orgName}}</text>
								<radio color="#007AFF" :value="item.orgId" />
							</label>
						</radio-group>
					</scroll-view>
				</view>
				<view class="uni-share-btn">
					<text class="" @click="cancel('share')">取消</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getProfile,
		binding,
		sendRqCode,
		getSchoolList,
		bindingForCard
	} from '../../../common/api/hot_water.js'
	import {
		isNull,
		getQueryString,
		chkPhone,
	} from '../../../common/js/utils.js'
	let _this;
	export default {
		data() {
			return {
				agreement: true,
				code: '',
				checked: false,
				user: uni.getStorageSync('userInfo'),
				school: {},
				search: '',
				schoolList: [],
				imageList: []
			}
		},
		onLoad(option) {
			_this = this;
		},
		watch: {
			current(oldV, newV) {
				this.hint = ""
			}
		},
		computed: {},
		methods: {
			scan() {
				uni.scanCode({
					scanType: ['qrCode', 'pdf417', 'barCode'],
					success: function(res) {
						let qrCode;
						let result;
						qrCode = res.result
						if (qrCode) {
							result = getQueryString(qrCode, 'scene') /* .split('-') */
							_this.code = result
						}
					}
				});
			},
			close(e) {
				this.imageList.splice(e, 1);
			},
			previewImage(index) { //预览图片
				uni.previewImage({
					urls: this.imageList,
					current: this.imageList[index]
				});
			},
			chooseImg() { //选择图片
				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: "compressed",
					count: 6 - this.imageList.length,
					success: (res) => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
						console.log(this.imageList.length)
					}
				})
			},
			agreementChange(res) {
				this.agreement = res.detail.value[0] === "1"
			},
			changBindType(res) {
				this.current = res.detail.current
			},
			clickBindType(res) {
				this.current = res.currentIndex
			},
			// 查询学校组织
			searchSchoolList(time) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					getSchoolList({
						name: this.search
					}).then(res => {
						if (res.code === 0) {
							this.schoolList = res.data
						} else if (res.code === 500) {
							// 没有查到数据
						} else {
							this.hint = res.msg
						}
					})
				}, time)
			},
			// 展示学校
			showChangSchool() {
				console.log(1)
				this.$nextTick(() => {
					this.$refs.showSchool.open();
					this.search = "";
					this.searchSchoolList(0);
				})
			},
			// 选择学校
			schoolChange(e) {
				this.school = this.schoolList.filter(item => {
					return item.orgId == e.detail.value
				})[0]
				this.$refs.showSchool.close()
			},
			cancel(type) {
				this.$refs.showSchool.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.s_card {
		padding: 0;
	}

	.agreement {
		display: flex;
		justify-content: center;
		margin: 36upx 0;
		text-align: center;
		font-size: 28upx;
		color: #999;
	}

	.uni-share {
		display: flex;
		flex-direction: column;
		background-color: #FFF;
		border-top-right-radius: 36upx;
		border-top-left-radius: 36upx;

		.schoolList {
			width: 100%;
			height: 600upx;
			margin: 20upx 0;
			// overflow-y: auto;
		}

		.item {
			padding: 0 24upx;
			line-height: 100upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			// text-align: center;
		}

		.uni-share-btn,
		.uni-share-title {
			height: 100upx;
			line-height: 100upx;
			font-weight: bolder;
			border-bottom: 1px #f5f5f5 solid;
			text-align: center;
			color: #333;
		}

		.uni-share-btn {
			;
			display: flex;
			justify-content: space-around;
			color: #007AFF;
			border: none;
			border-top: 1px #f5f5f5 solid;

			text {
				width: 50%;
			}
		}
	}

	.image_box {
		padding: 24upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.uploader_file {
		width: 120upx;
		height: 120upx;
		margin: 10rpx;
	}

	.uploader_input_box {
		position: relative;
		margin: 10rpx;
		width: 120upx;
		border-radius: 6upx;
		height: 120upx;
		border: 1rpx solid #D9D9D9;
	}

	.uploader_input_box:before,
	.uploader_input_box:after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #D9D9D9;
	}

	.uploader_input_box:before {
		width: 4rpx;
		height: 50rpx;
	}

	.uploader_input_box:after {
		width: 50rpx;
		height: 4rpx;
	}

	.uploader_input_box:active {
		border-color: #999999;
	}

	.uploader_input_box:active:before,
	.uploader_input_box:active:after {
		background-color: #999999;
	}

	.uploader_img {
		display: block;
		width: 120upx;
		height: 120upx;
		border-radius: 6upx;
	}

	.uploader_input {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.close-view {
		text-align: center;
		line-height: 14px;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		background: #FF5053;
		color: #FFFFFF;
		position: absolute;
		top: -6px;
		right: -4px;
		font-size: 12px;
	}
</style>
